<template>
<div>
  <el-button @click="addtype" type="text" size="small">新增字典类型</el-button>

  <el-form :inline="true" ref="form" :model="form" label-width="80px">
    <el-form-item label="字典名称">
      <el-input v-model="form.dictName"></el-input>
    </el-form-item>
    <el-form-item label="字典类型">
      <el-input v-model="form.dictType"></el-input>
    </el-form-item>
    <el-form-item label="字典状态">
      <el-select v-model="form.status" placeholder="用户状态">
        <el-option label="正常" value="0"></el-option>
        <el-option label="停用" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <el-date-picker
          v-model="createTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          :default-time="['00:00:00', '23:59:59']"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="dictTypeList">查询</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%">
    <el-table-column
        type="selection" width="55">
    </el-table-column>
    <el-table-column
        label="字典编号"
        prop="dictId"
        width="120">
    </el-table-column>
    <el-table-column
        prop="dictName"
        label="字典名称"
        width="120">
    </el-table-column>
    <el-table-column
        prop="dictType"
        label="字典类型"
        show-overflow-tooltip>
      <template v-slot="ss">
      <el-button type="text" @click="goDictData(ss.row.dictType)">{{ss.row.dictType}}</el-button>
      </template>
    </el-table-column>
    <el-table-column
        label="状态"
        show-overflow-tooltip>
      <template scope="ss">
        <el-switch
            v-model="ss.row.status"
            active-value="0"
            inactive-value="1"
            @change="updateRoleStatus(ss.row.status,ss.row.roleId)">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip>
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="updatetype(scope.row)" type="primary" size="small">修改</el-button><br><br>
        <el-button @click="removetype(scope.row.dictType)" type="primary" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 2, 3, 4,5,6]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
  </div>

  <el-dialog title="添加" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="字典名称" :label-width="formLabelWidth">
        <el-input v-model="form.dictName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="字典类型" :label-width="formLabelWidth">
        <el-input v-model="form.dictType" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio v-model="form.status" label="0">正常</el-radio>
        <el-radio v-model="form.status" label="1">停用</el-radio>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="form.remark" autocomplete="off">

        </el-input>

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addok">确 定</el-button>
    </div>
  </el-dialog>
  <el-dialog title="修改" :visible.sync="dialogFormVisible1">
    <el-form :model="ff">
      <el-form-item label="字典名称" :label-width="formLabelWidth">
        <el-input v-model="ff.dictName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="字典类型" :label-width="formLabelWidth">
        <el-select v-model="ff.dictType" placeholder="请选择活动区域">
          <el-option
              v-for="item in typelist"
              :key="item.dictId"
              :label="item.dictType"
              :value="item.dictId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-radio v-model="ff.status" label="0">正常</el-radio>
        <el-radio v-model="ff.status" label="1">停用</el-radio>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth">
        <el-input v-model="ff.remark" autocomplete="off">

        </el-input>

      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="updateok(ff.dictId)">修 改</el-button>
    </div>
  </el-dialog>
</div>
</template>
<script>
export default {
  data(){
    return {
      createTime:[],
      form: {
        dictName:'',
        dictType: '',
        status: '',
        createStartTime:'',
        createEndTime:'',
      },
      dialogFormVisible:false,
      dialogFormVisible1:false,
      tlists:[],
      options: [{
        value: '0',
        label: '正常'
      }, {
        value: '1',
        label: '停用'
      }],
      formInline:{
        t1:'',
        t2:'',
      },
      mm:"",
      tableData:[],
      pageNum:1,
      pageSize:8,
      total:0,

      formLabelWidth:"80px",
      typelist:[],
      ff:{},
    }
  },
  methods:{
    tlist(){
      this.axios.post("http://localhost:6785/dict/type/tlist").then(res=>{
        this.tlists=res.data;

      })
    },
    list(){
      this.formInline.t1=this.createTime[0];
      this.formInline.t2=this.createTime[1];
      console.log(this.formInline.t1);
      this.axios.post("http://localhost:6785/dict/type/typelist?pageNum="+this.pageNum+"&pageSize="+this.pageSize,this.formInline).then(res=>{
        this.tableData=res.data.list;
        this.total=res.data.total;
      })
    },
    typelists(){
      this.axios.post("http://localhost:6785/dict/type/tlist").then(res=>{
        this.typelist=res.data;
      })
    },
    addtype(){
      this.dialogFormVisible=true;
      this.form={};
    },

    addok(){
      this.axios.post("http://localhost:6785/dict/type/addtype",this.form).then(res=>{
        if(res.data==1){
          this.typelist=res.data.data;
          this.dialogFormVisible=false;
          this.list();
        }
      })
    },
    removetype(dictType){
      this.axios.post("http://localhost:6785/dict/type/removetype/"+dictType).then(res=>{
        if(res.data==1) {
          this.$message.success("删除成功");
          this.list();
        }

      })

    },
    updatetype(row){
      this.dialogFormVisible1=true;
      this.ff=row;
      console.log(row);
    },
    updateok(dictId){
      this.ff.dictId=dictId;
      console.log(dictId);
      this.axios.post("http://localhost:6785/dict/type/updatetype?dictId="+dictId,this.ff).then(res=>{
        if(res.data==1){
          this.$message.success("修改字典成功");
          this.dialogFormVisible1=false;
          this.list();
        }else{
          this.$message.error("修改错误");

        }
      })

    },
    dictTypeList(){
      const params= this.form;
      params.createStartTime=this.createTime[0];
      params.createEndTime=this.createTime[1];
      params.pageNum=this.pageNum;
      params.pageSize = this.pageSize;
      console.log(params);
      this.axios.get("http://localhost:6785/dict/type/select",{params}).then(res=>{
        console.log(res.data.list.list);
        this.tableData=res.data.list.list;
        this.total = res.data.list.total;
        this.pageNum=res.data.list.pageNum;
        this.pageSize=res.data.list.pageSize;
      })
    },
    //每页多少条数据
    handleSizeChange(val) {
      this.pageSize=val;
      this.dictTypeList();
    },
    //查询第几页数据
    handleCurrentChange(val) {
      this.pageNum = val;
      this.dictTypeList();
    },
    goDictData(dictType){
      this.$router.push({path: '/data',query:{ dictType:dictType}})
    }
  },
  created() {
    this.dictTypeList();
    this.typelists();
    this.tlist();
  }
}
</script>
<style>

</style>